<template>
    <div>

  <div   class="f-fl container">
      <div  class="header1 f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
          <com-select ref="comselect" label="围栏状态筛选"></com-select>
      </div>
      <div class="map-area el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
          <div  class="header  el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24" v-show="isShow">
              <article>
                  <nav>
                      <p>
                          <label>设备总数：<span>{{datas.user.total_num}}</span>个</label>
                          <label>当前在线：<span>{{datas.user.online_num}}</span>个</label>
                          <label>当前离线：<span>{{datas.user.offline_num}}</span>个</label>
                      </p>
                  </nav>
                  <nav>
                      <p>
                          当前警告数:<b>{{datas.warning.total_num}}</b>条 <a class="cursor" @click="goWarn">查看全部></a>
                      </p>
                  </nav>

              </article>
              <article>
                  <nav>
                      <p>
                          <label>围栏总数：<span>{{datas.electronic_fence.total_num}}</span>个</label>
                          <label>已激活：<span>{{datas.electronic_fence.active_num}}</span>个</label>
                          <label>未激活：<span>{{datas.electronic_fence.disable_num}}</span>个</label>
                      </p>
                  </nav>
                  <nav>
                      <div class="flex1">
                         <label>最新警告:</label>
                          <aside class="cursor" @click="goWarn">
                              <ul>
                                  <li class="f-ellipsis" v-for="item in datas.warning.list">{{item.username}} {{item.type=='in'?'进入':'离开'}} 围栏"{{item.electronic_fence_name}}" {{+item.status?'正在告警':'已结束告警'}}</li>
                              </ul>
                          </aside>
                      </div>
                  </nav>
              </article>
          </div>
          <div id="map"></div>
      </div>

  </div>


  </div>
</template>
<script>
    import comSelect from 'c/com_select/com_select_component'
    import comSearch from 'c/com_search/search'
    var  gpsToBaidu = require('com/gpsToBaiduPoints');
    var  TextIconOverlay = require('com/TextIconOverlay');
     export default{
        data(){
              return{
                  $map:null,
                  datas:{
                     user:{},
                     warning:{},
                      electronic_fence:{},
                  },
                  isShow:false,
                  polygons:[], //记录网点围栏数组

                  markers:[], //所有设备数组

                  ppoints:[], /*关键点,围栏中心点*/

                  pstatus:0, /*围栏区分显示，是否显示 报警，还是全部*/
            }
        },
        created(){
            /*切换显示围栏*/
            this.$on('choose-selected-status',value=>{
                this.pstatus=value

                /*清除围栏*/
                if(this.$map&&this.polygons.length) {
                    for(let i=0,l=this.polygons.length;i<l;i++)
                        this.$map.removeOverlay(this.polygons[i])
                    this.polygons=[]
                }

                this.updateNetArea()

            })

        },
        mounted(){
           this.$refs.comselect.$emit('get-selected-list',{ '告警中':'1', '未告警':'2'})
           this.getQuery()
           store.timer=setInterval(()=>{this.getQuery()},8000)
            this.$refs.comselect.$emit('set-selected-status',1)
        },
        components:{
           comSelect,
           comSearch,
        },
        methods:{
            init(){
               if(!this.$map){
                   this.$map = new BMap.Map('map')
                   this.$map.centerAndZoom('深圳', 11);
                   this.$map.enableScrollWheelZoom(true);//开启滚轮缩放
                   this.$map.enableDragging();//初始化地图中心位置
                   this.$map.enableAutoResize();
               }


                this.reDraw(1)


                this.updateDevice() /*拿datas里面的user下面的list */

/*                if(!this.polygons.length)/!*拿datas里面的electronic_fence下面的list*!/*/

                this.updateNetArea()


                this.updateWarning() /*拿datas里面的warning下面的list*/
            },

            goWarn(){
                this.$router.push({path:'/warn/log'})
            },



            /*
            重绘地图数据
            只重绘设备marker位置等，网点数据不必更新
            */
            reDraw(type){
                if(this.$map&&this.markers.length){
                    for(let i=0,l=this.markers.length;i<l;i++)
                        this.$map.removeOverlay(this.markers[i])
                    this.markers=[]
                }


                /*清除围栏*/
                if(type&&this.$map&&this.polygons.length) {
                        for(let i=0,l=this.polygons.length;i<l;i++)
                        this.$map.removeOverlay(this.polygons[i])
                        this.polygons=[]
                 }

             },
            /*
            * 更新最新警告(自动更新)
            * */
            updateWarning(){

            },

            /*
            创建设备marker
            区分在线与离线
            */
            updateDevice(){
                 let opt={
                     size:new BMap.Size(40,40),
                     textColor: '#3D5266',
                     opt_textSize: 10,
                     imageOffset:[-20,-20],
                 },styles=[opt],html,label,points=[]

                if(!this.datas.user.list||!this.datas.user.list.length) return


                this.datas.user.list.forEach(it=>{
                    if(+it.online_status) opt.url=require('./img/device_marker.png') /*区分图片*/
                    else opt.url=require('./img/device_marker1.png')

                    html = ''
                        + '<p style="position:relative;top:-30px;left:-50px; width:140px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;height:20px;line-height: 20px;border-radius:2px; background: #fff;box-shadow: 0 0 4px 0 rgba(0,0,0,0.30);  background:#fff;">'
                        +`${it.username}-${+it.online_status?'在线':'离线'}`
                        +       '<i style="display:block;position:absolute;top:20px; left: 50px;width:0;height:0;border-left: 5px solid transparent; border-right: 8px solid transparent;border-top: 10px solid #fff;">'
                        +       '</i>'
                        + '</p>'

                    points.push(new BMap.Point(it.lng,it.lat))

                    label=new TextIconOverlay(
                        new BMap.Point(it.lng,it.lat),
                        html,
                        {
                            styles,
                        }
                    )

                    if(this.$map) this.$map.addOverlay(label)
                    this.markers.push(label)
                })

                /*调整全部视野*/
       /*         if(points.length) this.$map.setViewport(points.concat(this.ppoints))*/


            },
            /*
            创建网点围栏
            根据warning_status区分围栏是否在告警中
            */
            updateNetArea(type){

                if(!this.datas.electronic_fence.list||!this.datas.electronic_fence.list.length) return

                this.ppoints=[]

                var styleOptions = {
                    strokeColor:"red",    //边线颜色。
                    strokeWeight: 2,       //边线的宽度，以像素为单位。
                    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
                    fillOpacity: 0.5,      //填充的透明度，取值范围0 - 1。
                    strokeStyle: 'solid' //边线的样式，solid或dashed。
                },styleOptions1={
                    strokeColor:"#444",    //边线颜色。
                    strokeWeight: 2,       //边线的宽度，以像素为单位。
                    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
                    fillOpacity: 0.4,      //填充的透明度，取值范围0 - 1。
                    strokeStyle: 'solid' //边线的样式，solid或dashed。
                }

               var  points=[],polygon='',label='',that=this.$map

               /*根据目前选中的围栏状态区分显示*/


                this.datas.electronic_fence.list.forEach(it=>{
                   /*需要把it.points转换成百度Point*/

                   if(!it.points) return

                    /*如果pstatus为1,2时需要对应区分显示*/
                    if((+this.pstatus==1&&!(+it.warning_status))||(+this.pstatus==2&&(+it.warning_status))) return

                   points=[]
                    it.points.forEach(item=>{
                        points.push(new BMap.Point(item.lng, item.lat))
                    })

                   polygon=new BMap.Polygon(
                        points,
                       +it.warning_status?styleOptions:styleOptions1,
                    )
                    label=new BMap.Label(it.electronic_fence_name, {offset: new BMap.Size(-30, -10), position:this.getCenterPoint(polygon.getPath())});
                    label.setStyle({
                        color: "#494d50",
                        fontSize: "8px",
                        backgroundColor: "0.1",
                        border: "0",
                        textAlign:'center',
                        fontWeight: "bold"
                    });

                    polygon.addEventListener('click',()=>{
                        console.log(it.id)
                        sessionStorage.setItem('electronic_fence_id',it.id)
                        this.$router.push({path:'/warn/log'})
                    })

                    this.$map.addOverlay(polygon)

                    this.$map.addOverlay(label)

                    /*鼠标 移动 显示与隐藏 label*/


                    if(it.lat&&it.lng) this.ppoints.push(new BMap.Point(it.lng, it.lat))

                    this.polygons.push(polygon)
                    this.polygons.push(label)

                })


            },

            /*获取围栏中心点*/
            getCenterPoint(path){
                var x = 0.0;
                var y = 0.0;
                for(var i=0;i<path.length;i++){
                    x=x+ parseFloat(path[i].lng);
                    y=y+ parseFloat(path[i].lat);
                }
                x=x/path.length;
                y=y/path.length;
                return new BMap.Point(x,y);
            },


            getQuery(){
                 this.$http.get('monitor/get_monitor_data',{}).then(res=>{
                     if(!res.result){
                         this.$nextTick(()=>{
                             this.datas=res.data
                             this.init()
                         })
                         this.isShow=true
                     }
                 })
            },

        }
    }
</script>
<style lang="scss" scoped>
    .cursor{
        cursor: pointer;
    }
  .container{
    font-size:14px;
    background:#fff;
    margin-left:24px;
    width:100%;
    .header1{
        height:50px;
        line-height:50px;
    }
      .header{
         position:absolute;
         left:0;
         top:0;
         z-index:20;
         width:100%;
         height:70px;
         background:rgba(188,188,188,0.6);

          article{
             margin:3px 10px;
             display:flex;
             justify-content: space-between;
              nav{
                  flex:1;
                  color:#333;
                  .flex1{
                      display:flex;
                      align-items: center;
                  }
                  aside{
                      position:relative;
                      margin-left:5px;
                      width:400px;
                      height:30px;
                      overflow-y:hidden;
                      line-height:30px;

                      text-indent: 10px;
                      border-radius:20px;
                      background:rgba(255,255,240,0.8);
                      ul{
                          width:100%;
                          animation:animateUp 20s  linear infinite;
                          color:red;
                          height:150px;
                      }
                      li{
                          height:30px;
                      }
                  }

                  b{
                      margin-left:6px;
                      color:red;
                      font-weight: bold;
                      margin-right:4px;
                  }
                  p{
                      line-height:30px;

                     a{
                         margin-left:5px;
                         color:#666;
                     }

                      label{
                          margin-right:6px;
                          span{
                              color:#4037ef;
                              font-weight: bold;
                              margin-right:4px;
                          }
                      }
                  }
              }
          }
      }

     .map-area{
         position:relative;
         margin:10px;
         height:720px;
         #map{
             width:100%;
             height:100%;
         }
     }

  }

  @keyframes animateUp {
      0%{margin-top:0px;}
      100%{margin-top:-150px;}
  }

</style>